import { Button, Form, Input, message } from 'antd';
import "./login.scss";
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { doLogin } from "../../api/request.js";

const App: React.FC = () => {

    const navigate = useNavigate()

    // 提交表单且数据验证成功后回调事件
    const onFinish = (values: any) => {
        // console.log('Success:', values);
        let data = { user_name: values.user_name, password: values.password }

        // 请求登录
        doLogin(data).then(res => {
            console.log(res)
            const { status } = res.data
            localStorage.setItem('status', status)
            switch (status) {
                case 1:
                    message.success('登陆成功');
                    localStorage.setItem(' user_name', data.user_name)
                    navigate('/home', { replace: true })
                    window.location.reload()
                    break;
                case 0:
                    message.error('该用户已存在，密码输入错误');
                    break;
                default:
                    break;
            }
        })
    };
    return (
        <div id='login'>
            <p className="login-tilte">喵喵妙后台管理系统</p>
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="user_name"
                    rules={[{ required: true, message: '请输入用户名！' }]}
                >
                    <Input placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码！' }]}
                >
                    <Input
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default App;